html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input
{margin: 0;padding: 0;border: none;outline: 0;font: inherit;vertical-align: baseline;-webkit-overflow-scrolling: touch; /*下拉滚动回弹效果关闭*/}
a,input{-webkit-tap-highlight-color:transparent;/*点击按下背景*/text-decoration:none;/*清除下划线*/}
input[type="button"], input[type="text"], input[type="email"], input[type="search"], input[type="password"]
{-webkit-appearance: none;-moz-appearance: none;appearance: none;outline:none;}
input[type="button"]{background:none;border:none;text-align:center;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
/*
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
*/
::-webkit-scrollbar {width: 6px;height: 6px;}
::-webkit-scrollbar-track-piece {background-color: rgba(0, 0, 0, 0.2);-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:horizontal {width: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;}
/*公共media query查询 1rem初始设置为12px
dpr为2时对应750的效果图 dpr为3时对应1080的效果图
查询区间间隔暂时设置为30px 对应3倍图时 1rem大小变化1px
对于dpr为2的有额外百分之4.2增大的兼容*/
@media screen and (max-width: 320px) { html,body{font-size:62.5%} }
@media screen and (min-width: 321px) and (max-width:350px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:71.62%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:68.75%} } }
@media screen and (min-width: 351px) and (max-width:380px) { html,body{font-size:75%} }
@media screen and (min-width: 381px) and (max-width:410px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:84.64%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:81.25%} } }
@media screen and (min-width: 411px) and (max-width:440px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:91.15%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:87.5%} } }
@media screen and (min-width: 441px) and (max-width:470px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:97.66%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:93.75%} } }
@media screen and (min-width: 471px) and (max-width:500px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:104.17%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:100%} } }
@media screen and (min-width: 501px) and (max-width:539px) { @media screen and (-webkit-min-device-pixel-ratio: 2){ html,body{font-size:110.68%} } @media screen and (-webkit-min-device-pixel-ratio: 3){ html,body{font-size:106.25%} } }
@media screen and (min-width: 540px) { html,body{font-size: 150%} }
/* start--文本行数限制--start */
.line-1 {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.line-2 {-webkit-line-clamp: 2;} .line-3 {-webkit-line-clamp: 3;} .line-4 {-webkit-line-clamp: 4;} .line-5 {-webkit-line-clamp: 5;}
.line-2, .line-3, .line-4, .line-5 {overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box; /*弹性伸缩盒*/-webkit-box-orient: vertical; /*设置伸缩盒子元素排列方式*/}
/* ==================
初始化
==================== */
html, body, .container {font-size: .97rem;background-color: #FFFFFF;color: #000000;min-height: 100vh;}
@media (prefers-color-scheme: dark){ html, body, .container {background-color: #0e0e0e;color: #ffffff;} }
/*遮罩层*/
.bg-mask {position: relative;} .bg-mask::after {content: "";border-radius: inherit;width: 100%;height: 100%;display: block;background-color: rgba(0, 0, 0, 0.6);position: absolute;left: 0;right: 0;bottom: 0;top: 0;} .bg-mask div{z-index: 5;position: relative;}
/* 圆 */
.round {border-radius: 5000px;}
/* 圆一点 */
.radius {border-radius: .2rem;} .radiuss {border-radius: .4rem;}
/* 图片 */
img {max-width: 100%;display: inline-block;position: relative;z-index: 0;}
img.loading:not([class*="round"])::before {content: "";background-color: #f5f5f5;display: block;position: absolute;width: 100%;height: 100%;z-index: -2;}
img.loading[class*="round"]::before {content: "";background-color: #f5f5f5;display: block;position: absolute;border-radius: 5000px;width: 100%;height: 100%;z-index: -2;}
img.loading[class*="radius"]::before {content: "";background-color: #f5f5f5;display: block;position: absolute;border-radius: .2rem;width: 100%;height: 100%;z-index: -2;}
img.loading[class*="radiuss"]::before {content: "";background-color: #f5f5f5;display: block;position: absolute;border-radius: .4rem;width: 100%;height: 100%;z-index: -2;}
img.loading::after {content: "\e7f1";font-family: "cuIcon";position: absolute;top: 0;left: 0;width: 1rem;height: 1rem;line-height: 1rem;right: 0;bottom: 0;z-index: -1;font-size: 1rem;margin: auto;color: #ccc;-webkit-animation: cuIcon-spin 2s infinite linear;animation: cuIcon-spin 2s infinite linear;display: block;}
@media (prefers-color-scheme: dark){ img.loading::before {background-color: #4b4d4f !important;} }
.bg-img {background-size: cover;background-position: center;background-repeat: no-repeat;}
/* ==================
边框
==================== */
/* -- 线条 -- */
.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids, .solids-top, .solids-right, .solids-bottom, .solids-left, .solidss, .solidss-top,
.solidss-right, .solidss-bottom, .solidss-left, .dashed, .dashed-top, .dashed-right, .dashed-bottom, .dashed-left {position: relative;}
/* -- 实线 -- */
.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after, .solid-left::after, .solids::after, .solids-top::after, .solids-right::after, .solids-bottom::after, .solids-left::after, .solidss::after, .solidss-top::after, .solidss-right::after, .solidss-bottom::after, .solidss-left::after {content: " ";width: 200%;height: 200%;position: absolute;top: 0;left: 0;border-radius: inherit;transform: scale(0.5);transform-origin: 0 0;pointer-events: none;box-sizing: border-box;}
.solid::after {border: 1px solid rgba(0, 0, 0, 0.1);} .solid-top::after {border-top: 1px solid rgba(0, 0, 0, 0.1);} .solid-right::after {border-right: 1px solid rgba(0, 0, 0, 0.1);} .solid-bottom::after {border-bottom: 1px solid rgba(0, 0, 0, 0.1);} .solid-left::after {border-left: 1px solid rgba(0, 0, 0, 0.1);} .solids::after {border: 4px solid #eee;} .solids-top::after {border-top: 4px solid #eee;} .solids-right::after {border-right: 4px solid #eee;} .solids-bottom::after {border-bottom: 4px solid #eee;} .solids-left::after {border-left: 4px solid #eee;} .solidss::after {border: 10px solid #eee;} .solidss-top::after {border-top: 10px solid #eee;} .solidss-right::after {border-right: 10px solid #eee;} .solidss-bottom::after {border-bottom: 10px solid #eee;} .solidss-left::after {border-left: 10px solid #eee;}
@media (prefers-color-scheme: dark){ .solid::after {border: 1px solid rgba(255, 255, 255, 0.1) !important;} .solid-top::after {border-top: 1px solid rgba(255, 255, 255, 0.1) !important;} .solid-right::after {border-right: 1px solid rgba(255, 255, 255, 0.1) !important;} .solid-bottom::after {border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;} .solid-left::after {border-left: 1px solid rgba(255, 255, 255, 0.1) !important;} .solids::after {border: 4px solid rgba(238, 238, 238, 0.1) !important;} .solids-top::after {border-top: 4px solid rgba(238, 238, 238, 0.1) !important;} .solids-right::after {border-right: 4px solid rgba(238, 238, 238, 0.1) !important;} .solids-bottom::after {border-bottom: 4px solid rgba(238, 238, 238, 0.1) !important;} .solids-left::after {border-left: 4px solid rgba(238, 238, 238, 0.1) !important;} .solidss::after {border: 10px solid rgba(238, 238, 238, 0.1) !important;} .solidss-top::after {border-top: 10px solid rgba(238, 238, 238, 0.1) !important;} .solidss-right::after {border-right: 10px solid rgba(238, 238, 238, 0.1) !important;} .solidss-bottom::after {border-bottom: 10px solid rgba(238, 238, 238, 0.1) !important;} .solidss-left::after {border-left: 10px solid rgba(238, 238, 238, 0.1) !important;} }
/* -- 虚线 -- */
.dashed::after, .dashed-top::after, .dashed-right::after, .dashed-bottom::after, .dashed-left::after{content: " ";width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;transform-origin: 0 0;pointer-events: none;box-sizing: border-box;}
.dashed::after {border: 1px dashed #ddd;} .dashed-top::after {border-top: 1px dashed #ddd;} .dashed-right::after {border-right: 1px dashed #ddd;} .dashed-bottom::after {border-bottom: 1px dashed #ddd;} .dashed-left::after {border-left: 1px dashed #ddd;}
@media (prefers-color-scheme: dark){ .dashed::after {border: 1px dashed rgba(238, 238, 238, 0.1) !important;} .dashed-top::after {border-top: 1px dashed rgba(238, 238, 238, 0.1) !important;} .dashed-right::after {border-right: 1px dashed rgba(238, 238, 238, 0.1) !important;} .dashed-bottom::after {border-bottom: 1px dashed rgba(238, 238, 238, 0.1) !important;} .dashed-left::after {border-left: 1px dashed rgba(238, 238, 238, 0.1) !important;} }
.line-red::after, .lines-red::after {border-color: #e54d42;}
.line-orange::after, .lines-orange::after {border-color: #f37b1d;}
.line-yellow::after, .lines-yellow::after {border-color: #fbbd08;}
.line-olive::after, .lines-olive::after {border-color: #8dc63f;}
.line-green::after, .lines-green::after {border-color: #39b54a;}
.line-cyan::after, .lines-cyan::after {border-color: #1cbbb4;}
.line-blue::after, .lines-blue::after {border-color: #0081ff;}
.line-purple::after, .lines-purple::after {border-color: #6739b6;}
.line-mauve::after, .lines-mauve::after {border-color: #9c26b0;}
.line-pink::after, .lines-pink::after {border-color: #e03997;}
.line-brown::after, .lines-brown::after {border-color: #a5673f;}
.line-grey::after, .lines-grey::after {border-color: #8799a3;}
.line-gray::after, .lines-gray::after {border-color: #aaaaaa;}
.line-black::after, .lines-black::after {border-color: #333333;}
.line-white::after, .lines-white::after {border-color: #ffffff;}
@media (prefers-color-scheme: dark){ .line-white::after, .lines-white::after {border-color: #303133 !important;} .line-black::after, .lines-black::after {border-color: #ffffff;} }
/* ==================
阴影
==================== */
.shadow[class*="-white"] {box-shadow: .3rem .3rem .648rem rgba(26, 26, 26, .2);}
.shadow[class*="-red"] {box-shadow: .3rem .3rem .648rem rgba(204, 69, 59, 0.2);}
.shadow[class*="-orange"] {box-shadow: .3rem .3rem .648rem rgba(217, 109, 26, 0.2);}
.shadow[class*="-yellow"] {box-shadow: .3rem .3rem .648rem rgba(224, 170, 7, 0.2);}
.shadow[class*="-olive"] {box-shadow: .3rem .3rem .648rem rgba(124, 173, 55, 0.2);}
.shadow[class*="-green"] {box-shadow: .3rem .3rem .648rem rgba(48, 156, 63, 0.2);}
.shadow[class*="-cyan"] {box-shadow: .3rem .3rem .648rem rgba(28, 187, 180, 0.2);}
.shadow[class*="-blue"] {box-shadow: .3rem .3rem .648rem rgba(0, 102, 204, 0.2);}
.shadow[class*="-purple"] {box-shadow: .3rem .3rem .648rem rgba(88, 48, 156, 0.2);}
.shadow[class*="-mauve"] {box-shadow: .3rem .3rem .648rem rgba(133, 33, 150, 0.2);}
.shadow[class*="-pink"] {box-shadow: .3rem .3rem .648rem rgba(199, 50, 134, 0.2);}
.shadow[class*="-brown"] {box-shadow: .3rem .3rem .648rem rgba(140, 88, 53, 0.2);}
.shadow[class*="-grey"] {box-shadow: .3rem .3rem .648rem rgba(114, 130, 138, 0.2);}
.shadow[class*="-gray"] {box-shadow: .3rem .3rem .648rem rgba(114, 130, 138, 0.2);}
.shadow[class*="-black"] {box-shadow: .3rem .3rem .648rem rgba(26, 26, 26, 0.2);}
.shadow[class*="-white"] {box-shadow: .3rem .3rem .648rem rgba(26, 26, 26, 0.2);}
/* 长阴影 */
.shadow-lg[class*="-white"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(26, 26, 26, .2);}
.shadow-lg[class*="-red"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(204, 69, 59, 0.2);}
.shadow-lg[class*="-orange"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(217, 109, 26, 0.2);}
.shadow-lg[class*="-yellow"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(224, 170, 7, 0.2);}
.shadow-lg[class*="-olive"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(124, 173, 55, 0.2);}
.shadow-lg[class*="-green"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(48, 156, 63, 0.2);}
.shadow-lg[class*="-cyan"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(28, 187, 180, 0.2);}
.shadow-lg[class*="-blue"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(0, 102, 204, 0.2);}
.shadow-lg[class*="-purple"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(88, 48, 156, 0.2);}
.shadow-lg[class*="-mauve"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(133, 33, 150, 0.2);}
.shadow-lg[class*="-pink"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(199, 50, 134, 0.2);}
.shadow-lg[class*="-brown"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(140, 88, 53, 0.2);}
.shadow-lg[class*="-grey"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(114, 130, 138, 0.2);}
.shadow-lg[class*="-gray"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(114, 130, 138, 0.2);}
.shadow-lg[class*="-black"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(26, 26, 26, 0.2);}
.shadow-lg[class*="-white"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(26, 26, 26, 0.2);}
@media (prefers-color-scheme: dark){
.shadow[class*="-white"] {box-shadow: .3rem .3rem .648rem rgba(255, 255, 255, .2);}
.shadow-lg[class*="-white"] {box-shadow: 0 1.288rem 3.22rem 0 rgba(255, 255, 255, .2);}
}
/* 翘边影 */
.shadow-warp {position: relative;box-shadow: 0 0 .648rem rgba(0, 0, 0, .1);}
.shadow-warp:before, .shadow-warp:after {position: absolute;content: "";top: 1.288rem;bottom: 1.934rem;left: 1.288rem;width: 50%;box-shadow: 0 1.934rem 1.288rem rgba(0, 0, 0, .2);transform: rotate(-3deg);z-index: -1;}
.shadow-warp:after {right: 1.288rem;left: auto;transform: rotate(3deg);}
/* 根据背景图阴影 */
.shadow-blur {position: relative;z-index: 1} .shadow-blur::before {content: "";display: block;background: inherit;filter: blur(.35rem);position: absolute;width: 100%;height: 100%;top: .35rem;left: .35rem;z-index: -1;opacity: 0.4;transform-origin: 0 0;border-radius: inherit;transform: scale(1, 1);}
/* ==================
布局 定位 flex弹性布局
==================== */
.flex {display: flex;}
.basis-xs {flex-basis: 20%;}
.basis-sm {flex-basis: 40%;}
.basis-df {flex-basis: 50%;}
.basis-lg {flex-basis: 60%;}
.basis-xl {flex-basis: 80%;}
.flex-sub {flex: 1;}
.flex-twice {flex: 2;}
.flex-treble {flex: 3;}
.flex-direction {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-center {align-items: center;}
.align-stretch {align-items: stretch;}
.align-stretch {align-items: stretch;}
.self-start {align-self: flex-start;}
.self-center {align-self: center;}
.self-end {align-self: flex-end;}
.self-stretch {align-self: stretch;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
/* ==================
内外边距
==================== */
.margin-xs {margin: 1.24vw;} .margin-sm {margin: 2.48vw;} .margin {margin: 3.72vw;} .margin-lg {margin: 4.96vw;} .margin-xl {margin: 5.2vw;}
.margin-top-xs {margin-top: 1.24vw;} .margin-top-sm {margin-top: 2.48vw;} .margin-top {margin-top: 3.72vw;} .margin-top-lg {margin-top: 4.96vw;} .margin-top-xl {margin-top: 5.2vw;}
.margin-right-xs {margin-right: 1.24vw;} .margin-right-sm {margin-right: 2.48vw;} .margin-right {margin-right: 3.72vw;} .margin-right-lg {margin-right: 4.96vw;} .margin-right-xl {margin-right: 5.2vw;}
.margin-bottom-xs {margin-bottom: 1.24vw;} .margin-bottom-sm {margin-bottom: 2.48vw;} .margin-bottom {margin-bottom: 3.72vw;} .margin-bottom-lg {margin-bottom: 4.96vw;} .margin-bottom-xl {margin-bottom: 5.2vw;}
.margin-left-xs {margin-left: 1.24vw;} .margin-left-sm {margin-left: 2.48vw;} .margin-left {margin-left: 3.72vw;} .margin-left-lg {margin-left: 4.96vw;} .margin-left-xl {margin-left: 5.2vw;}
.margin-lr-xs {margin-left: 1.24vw;margin-right: 1.24vw;} .margin-lr-sm {margin-left: 2.48vw;margin-right: 2.48vw;} .margin-lr {margin-left: 3.72vw;margin-right: 3.72vw;} .margin-lr-lg {margin-left: 4.96vw;margin-right: 4.96vw;} .margin-lr-xl {margin-left: 5.2vw;margin-right: 5.2vw;}
.margin-tb-xs {margin-top: 1.24vw;margin-bottom: 1.24vw;} .margin-tb-sm {margin-top: 2.48vw;margin-bottom: 2.48vw;} .margin-tb {margin-top: 3.72vw;margin-bottom: 3.72vw;} .margin-tb-lg {margin-top: 4.96vw;margin-bottom: 4.96vw;} .margin-tb-xl {margin-top: 5.2vw;margin-bottom: 5.2vw;}
.padding-xs {padding: 1.24vw;} .padding-sm {padding: 2.48vw;} .padding {padding: 3.72vw;} .padding-lg {padding: 4.96vw;} .padding-xl {padding: 5.2vw;}
.padding-top-xs {padding-top: 1.24vw;} .padding-top-sm {padding-top: 2.48vw;} .padding-top {padding-top: 3.72vw;} .padding-top-lg {padding-top: 4.96vw;} .padding-top-xl {padding-top: 5.2vw;}
.padding-right-xs {padding-right: 1.24vw;} .padding-right-sm {padding-right: 2.48vw;} .padding-right {padding-right: 3.72vw;} .padding-right-lg {padding-right: 4.96vw;} .padding-right-xl {padding-right: 5.2vw;}
.padding-bottom-xs {padding-bottom: 1.24vw;} .padding-bottom-sm {padding-bottom: 2.48vw;} .padding-bottom {padding-bottom: 3.72vw;} .padding-bottom-lg {padding-bottom: 4.96vw;} .padding-bottom-xl {padding-bottom: 5.2vw;}
.padding-left-xs {padding-left: 1.24vw;} .padding-left-sm {padding-left: 2.48vw;} .padding-left {padding-left: 3.72vw;} .padding-left-lg {padding-left: 4.96vw;} .padding-left-xl {padding-left: 5.2vw;}
.padding-lr-xs {padding-left: 1.24vw;padding-right: 1.24vw;} .padding-lr-sm {padding-left: 2.48vw;padding-right: 2.48vw;} .padding-lr {padding-left: 3.72vw;padding-right: 3.72vw;} .padding-lr-lg {padding-left: 4.96vw;padding-right: 4.96vw;} .padding-lr-xl {padding-left: 5.2vw;padding-right: 5.2vw;}
.padding-tb-xs {padding-top: 1.24vw;padding-bottom: 1.24vw;} .padding-tb-sm {padding-top: 2.48vw;padding-bottom: 2.48vw;} .padding-tb {padding-top: 3.72vw;padding-bottom: 3.72vw;} .padding-tb-lg {padding-top: 4.96vw;padding-bottom: 4.96vw;} .padding-tb-xl {padding-top: 5.2vw;padding-bottom: 5.2vw;}
.margin-0, .m-0 {margin: 0 !important; } .padding-0, .p-0 {padding: 0 !important; }
.m-l-0 {margin-left: 0 !important; } .margin-left-0 {margin-left: 0 !important; } .p-l-0 {padding-left: 0 !important; } .padding-left-0 {padding-left: 0 !important; }
.m-t-0 {margin-top: 0 !important; } .margin-top-0 {margin-top: 0 !important; } .p-t-0 {padding-top: 0 !important; } .padding-top-0 {padding-top: 0 !important; }
.m-r-0 {margin-right: 0 !important; } .margin-right-0 {margin-right: 0 !important; } .p-r-0 {padding-right: 0 !important; } .padding-right-0 {padding-right: 0 !important; }
.m-b-0 {margin-bottom: 0 !important; } .margin-bottom-0 {margin-bottom: 0 !important; } .p-b-0 {padding-bottom: 0 !important; } .padding-bottom-0 {padding-bottom: 0 !important; }
.margin-1, .m-1 {margin: 1vw !important; } .padding-1, .p-1 {padding: 1vw !important; } .margin-2, .m-2 {margin: 2vw !important; } .padding-2, .p-2 {padding: 2vw !important; } .margin-3, .m-3 {margin: 3vw !important; } .padding-3, .p-3 {padding: 3vw !important; } .margin-4, .m-4 {margin: 4vw !important; } .padding-4, .p-4 {padding: 4vw !important; } .margin-5, .m-5 {margin: 5vw !important; } .padding-5, .p-5 {padding: 5vw !important; }
.margin-6, .m-6 {margin: 6vw !important; } .padding-6, .p-6 {padding: 6vw !important; } .margin-7, .m-7 {margin: 7vw !important; } .padding-7, .p-7 {padding: 7vw !important; } .margin-8, .m-8 {margin: 8vw !important; } .padding-8, .p-8 {padding: 8vw !important; } .margin-9, .m-9 {margin: 9vw !important; } .padding-9, .p-9 {padding: 9vw !important; } .margin-10, .m-10 {margin: 10vw !important; } .padding-10, .p-10 {padding: 10vw !important; }
.margin-11, .m-11 {margin: 11vw !important; } .padding-11, .p-11 {padding: 11vw !important; } .margin-12, .m-12 {margin: 12vw !important; } .padding-12, .p-12 {padding: 12vw !important; } .margin-13, .m-13 {margin: 13vw !important; } .padding-13, .p-13 {padding: 13vw !important; } .margin-14, .m-14 {margin: 14vw !important; } .padding-14, .p-14 {padding: 14vw !important; } .margin-15, .m-15 {margin: 15vw !important; } .padding-15, .p-15 {padding: 15vw !important; }
.margin-16, .m-16 {margin: 16vw !important; } .padding-16, .p-16 {padding: 16vw !important; } .margin-17, .m-17 {margin: 17vw !important; } .padding-17, .p-17 {padding: 17vw !important; } .margin-18, .m-18 {margin: 18vw !important; } .padding-18, .p-18 {padding: 18vw !important; } .margin-19, .m-19 {margin: 19vw !important; } .padding-19, .p-19 {padding: 19vw !important; } .margin-20, .m-20 {margin: 20vw !important; } .padding-20, .p-20 {padding: 20vw !important; }
.margin-left-1, .m-l-1 {margin-left: 1vw !important; }.padding-left-1, .p-l-1 {padding-left: 1vw !important; }.margin-top-1, .m-t-1 {margin-top: 1vw !important; }.padding-top-1, .p-t-1 {padding-top: 1vw !important; }.margin-right-1, .m-r-1 {margin-right: 1vw !important; }.padding-right-1, .p-r-1 {padding-right: 1vw !important; }.margin-bottom-1, .m-b-1 {margin-bottom: 1vw !important; }.padding-bottom-1, .p-b-1 {padding-bottom: 1vw !important; }
.margin-left-2, .m-l-2 {margin-left: 2vw !important; }.padding-left-2, .p-l-2 {padding-left: 2vw !important; }.margin-top-2, .m-t-2 {margin-top: 2vw !important; }.padding-top-2, .p-t-2 {padding-top: 2vw !important; }.margin-right-2, .m-r-2 {margin-right: 2vw !important; }.padding-right-2, .p-r-2 {padding-right: 2vw !important; }.margin-bottom-2, .m-b-2 {margin-bottom: 2vw !important; }.padding-bottom-2, .p-b-2 {padding-bottom: 2vw !important; }
.margin-left-3, .m-l-3 {margin-left: 3vw !important; }.padding-left-3, .p-l-3 {padding-left: 3vw !important; }.margin-top-3, .m-t-3 {margin-top: 3vw !important; }.padding-top-3, .p-t-3 {padding-top: 3vw !important; }.margin-right-3, .m-r-3 {margin-right: 3vw !important; }.padding-right-3, .p-r-3 {padding-right: 3vw !important; }.margin-bottom-3, .m-b-3 {margin-bottom: 3vw !important; }.padding-bottom-3, .p-b-3 {padding-bottom: 3vw !important; }
.margin-left-4, .m-l-4 {margin-left: 4vw !important; }.padding-left-4, .p-l-4 {padding-left: 4vw !important; }.margin-top-4, .m-t-4 {margin-top: 4vw !important; }.padding-top-4, .p-t-4 {padding-top: 4vw !important; }.margin-right-4, .m-r-4 {margin-right: 4vw !important; }.padding-right-4, .p-r-4 {padding-right: 4vw !important; }.margin-bottom-4, .m-b-4 {margin-bottom: 4vw !important; }.padding-bottom-4, .p-b-4 {padding-bottom: 4vw !important; }
.margin-left-5, .m-l-5 {margin-left: 5vw !important; }.padding-left-5, .p-l-5 {padding-left: 5vw !important; }.margin-top-5, .m-t-5 {margin-top: 5vw !important; }.padding-top-5, .p-t-5 {padding-top: 5vw !important; }.margin-right-5, .m-r-5 {margin-right: 5vw !important; }.padding-right-5, .p-r-5 {padding-right: 5vw !important; }.margin-bottom-5, .m-b-5 {margin-bottom: 5vw !important; }.padding-bottom-5, .p-b-5 {padding-bottom: 5vw !important; }
.margin-left-6, .m-l-6 {margin-left: 6vw !important; }.padding-left-6, .p-l-6 {padding-left: 6vw !important; }.margin-top-6, .m-t-6 {margin-top: 6vw !important; }.padding-top-6, .p-t-6 {padding-top: 6vw !important; }.margin-right-6, .m-r-6 {margin-right: 6vw !important; }.padding-right-6, .p-r-6 {padding-right: 6vw !important; }.margin-bottom-6, .m-b-6 {margin-bottom: 6vw !important; }.padding-bottom-6, .p-b-6 {padding-bottom: 6vw !important; }
.margin-left-7, .m-l-7 {margin-left: 7vw !important; }.padding-left-7, .p-l-7 {padding-left: 7vw !important; }.margin-top-7, .m-t-7 {margin-top: 7vw !important; }.padding-top-7, .p-t-7 {padding-top: 7vw !important; }.margin-right-7, .m-r-7 {margin-right: 7vw !important; }.padding-right-7, .p-r-7 {padding-right: 7vw !important; }.margin-bottom-7, .m-b-7 {margin-bottom: 7vw !important; }.padding-bottom-7, .p-b-7 {padding-bottom: 7vw !important; }
.margin-left-8, .m-l-8 {margin-left: 8vw !important; }.padding-left-8, .p-l-8 {padding-left: 8vw !important; }.margin-top-8, .m-t-8 {margin-top: 8vw !important; }.padding-top-8, .p-t-8 {padding-top: 8vw !important; }.margin-right-8, .m-r-8 {margin-right: 8vw !important; }.padding-right-8, .p-r-8 {padding-right: 8vw !important; }.margin-bottom-8, .m-b-8 {margin-bottom: 8vw !important; }.padding-bottom-8, .p-b-8 {padding-bottom: 8vw !important; }
.margin-left-9, .m-l-9 {margin-left: 9vw !important; }.padding-left-9, .p-l-9 {padding-left: 9vw !important; }.margin-top-9, .m-t-9 {margin-top: 9vw !important; }.padding-top-9, .p-t-9 {padding-top: 9vw !important; }.margin-right-9, .m-r-9 {margin-right: 9vw !important; }.padding-right-9, .p-r-9 {padding-right: 9vw !important; }.margin-bottom-9, .m-b-9 {margin-bottom: 9vw !important; }.padding-bottom-9, .p-b-9 {padding-bottom: 9vw !important; }
.margin-left-10, .m-l-10 {margin-left: 10vw !important; }.padding-left-10, .p-l-10 {padding-left: 10vw !important; }.margin-top-10, .m-t-10 {margin-top: 10vw !important; }.padding-top-10, .p-t-10 {padding-top: 10vw !important; }.margin-right-10, .m-r-10 {margin-right: 10vw !important; }.padding-right-10, .p-r-10 {padding-right: 10vw !important; }.margin-bottom-10, .m-b-10 {margin-bottom: 10vw !important; }.padding-bottom-10, .p-b-10 {padding-bottom: 10vw !important; }
.margin-left-11, .m-l-11 {margin-left: 11vw !important; }.padding-left-11, .p-l-11 {padding-left: 11vw !important; }.margin-top-11, .m-t-11 {margin-top: 11vw !important; }.padding-top-11, .p-t-11 {padding-top: 11vw !important; }.margin-right-11, .m-r-11 {margin-right: 11vw !important; }.padding-right-11, .p-r-11 {padding-right: 11vw !important; }.margin-bottom-11, .m-b-11 {margin-bottom: 11vw !important; }.padding-bottom-11, .p-b-11 {padding-bottom: 11vw !important; }
.margin-left-12, .m-l-12 {margin-left: 12vw !important; }.padding-left-12, .p-l-12 {padding-left: 12vw !important; }.margin-top-12, .m-t-12 {margin-top: 12vw !important; }.padding-top-12, .p-t-12 {padding-top: 12vw !important; }.margin-right-12, .m-r-12 {margin-right: 12vw !important; }.padding-right-12, .p-r-12 {padding-right: 12vw !important; }.margin-bottom-12, .m-b-12 {margin-bottom: 12vw !important; }.padding-bottom-12, .p-b-12 {padding-bottom: 12vw !important; }
.margin-left-13, .m-l-13 {margin-left: 13vw !important; }.padding-left-13, .p-l-13 {padding-left: 13vw !important; }.margin-top-13, .m-t-13 {margin-top: 13vw !important; }.padding-top-13, .p-t-13 {padding-top: 13vw !important; }.margin-right-13, .m-r-13 {margin-right: 13vw !important; }.padding-right-13, .p-r-13 {padding-right: 13vw !important; }.margin-bottom-13, .m-b-13 {margin-bottom: 13vw !important; }.padding-bottom-13, .p-b-13 {padding-bottom: 13vw !important; }
.margin-left-14, .m-l-14 {margin-left: 14vw !important; }.padding-left-14, .p-l-14 {padding-left: 14vw !important; }.margin-top-14, .m-t-14 {margin-top: 14vw !important; }.padding-top-14, .p-t-14 {padding-top: 14vw !important; }.margin-right-14, .m-r-14 {margin-right: 14vw !important; }.padding-right-14, .p-r-14 {padding-right: 14vw !important; }.margin-bottom-14, .m-b-14 {margin-bottom: 14vw !important; }.padding-bottom-14, .p-b-14 {padding-bottom: 14vw !important; }
.margin-left-15, .m-l-15 {margin-left: 15vw !important; }.padding-left-15, .p-l-15 {padding-left: 15vw !important; }.margin-top-15, .m-t-15 {margin-top: 15vw !important; }.padding-top-15, .p-t-15 {padding-top: 15vw !important; }.margin-right-15, .m-r-15 {margin-right: 15vw !important; }.padding-right-15, .p-r-15 {padding-right: 15vw !important; }.margin-bottom-15, .m-b-15 {margin-bottom: 15vw !important; }.padding-bottom-15, .p-b-15 {padding-bottom: 15vw !important; }
.margin-left-16, .m-l-16 {margin-left: 16vw !important; }.padding-left-16, .p-l-16 {padding-left: 16vw !important; }.margin-top-16, .m-t-16 {margin-top: 16vw !important; }.padding-top-16, .p-t-16 {padding-top: 16vw !important; }.margin-right-16, .m-r-16 {margin-right: 16vw !important; }.padding-right-16, .p-r-16 {padding-right: 16vw !important; }.margin-bottom-16, .m-b-16 {margin-bottom: 16vw !important; }.padding-bottom-16, .p-b-16 {padding-bottom: 16vw !important; }
.margin-left-17, .m-l-17 {margin-left: 17vw !important; }.padding-left-17, .p-l-17 {padding-left: 17vw !important; }.margin-top-17, .m-t-17 {margin-top: 17vw !important; }.padding-top-17, .p-t-17 {padding-top: 17vw !important; }.margin-right-17, .m-r-17 {margin-right: 17vw !important; }.padding-right-17, .p-r-17 {padding-right: 17vw !important; }.margin-bottom-17, .m-b-17 {margin-bottom: 17vw !important; }.padding-bottom-17, .p-b-17 {padding-bottom: 17vw !important; }
.margin-left-18, .m-l-18 {margin-left: 18vw !important; }.padding-left-18, .p-l-18 {padding-left: 18vw !important; }.margin-top-18, .m-t-18 {margin-top: 18vw !important; }.padding-top-18, .p-t-18 {padding-top: 18vw !important; }.margin-right-18, .m-r-18 {margin-right: 18vw !important; }.padding-right-18, .p-r-18 {padding-right: 18vw !important; }.margin-bottom-18, .m-b-18 {margin-bottom: 18vw !important; }.padding-bottom-18, .p-b-18 {padding-bottom: 18vw !important; }
.margin-left-19, .m-l-19 {margin-left: 19vw !important; }.padding-left-19, .p-l-19 {padding-left: 19vw !important; }.margin-top-19, .m-t-19 {margin-top: 19vw !important; }.padding-top-19, .p-t-19 {padding-top: 19vw !important; }.margin-right-19, .m-r-19 {margin-right: 19vw !important; }.padding-right-19, .p-r-19 {padding-right: 19vw !important; }.margin-bottom-19, .m-b-19 {margin-bottom: 19vw !important; }.padding-bottom-19, .p-b-19 {padding-bottom: 19vw !important; }
.margin-left-20, .m-l-20 {margin-left: 20vw !important; }.padding-left-20, .p-l-20 {padding-left: 20vw !important; }.margin-top-20, .m-t-20 {margin-top: 20vw !important; }.padding-top-20, .p-t-20 {padding-top: 20vw !important; }.margin-right-20, .m-r-20 {margin-right: 20vw !important; }.padding-right-20, .p-r-20 {padding-right: 20vw !important; }.margin-bottom-20, .m-b-20 {margin-bottom: 20vw !important; }.padding-bottom-20, .p-b-20 {padding-bottom: 20vw !important; }
/* ==================
浮动
==================== */
.cf::after, .cf::before {content: " ";display: table;} .cf::after {clear: both;} .fl {float: left;} .fr {float: right;}
/* ==================
定位
==================== */
.fixed{position: fixed;} .relative{position: relative;} .absolute{position: absolute;}
.top-0 {top: 0 !important; } .left-0 {left: 0 !important; } .right-0 {right: 0 !important; } .bottom-0 {bottom: 0 !important; }
.top-1 {top: 1vw !important; } .left-1 {left: 1vw !important; } .right-1 {right: 1vw !important; } .bottom-1 {bottom: 1vw !important; } .top-2 {top: 2vw !important; } .left-2 {left: 2vw !important; } .right-2 {right: 2vw !important; } .bottom-2 {bottom: 2vw !important; } .top-3 {top: 3vw !important; } .left-3 {left: 3vw !important; } .right-3 {right: 3vw !important; } .bottom-3 {bottom: 3vw !important; } .top-4 {top: 4vw !important; } .left-4 {left: 4vw !important; } .right-4 {right: 4vw !important; } .bottom-4 {bottom: 4vw !important; } .top-5 {top: 5vw !important; } .left-5 {left: 5vw !important; } .right-5 {right: 5vw !important; } .bottom-5 {bottom: 5vw !important; }
.top-6 {top: 6vw !important; } .left-6 {left: 6vw !important; } .right-6 {right: 6vw !important; } .bottom-6 {bottom: 6vw !important; } .top-7 {top: 7vw !important; } .left-7 {left: 7vw !important; } .right-7 {right: 7vw !important; } .bottom-7 {bottom: 7vw !important; } .top-8 {top: 8vw !important; } .left-8 {left: 8vw !important; } .right-8 {right: 8vw !important; } .bottom-8 {bottom: 8vw !important; } .top-9 {top: 9vw !important; } .left-9 {left: 9vw !important; } .right-9 {right: 9vw !important; } .bottom-9 {bottom: 9vw !important; } .top-10 {top: 10vw !important; } .left-10 {left: 10vw !important; } .right-10 {right: 10vw !important; } .bottom-10 {bottom: 10vw !important; }
.top-11 {top: 11vw !important; } .left-11 {left: 11vw !important; } .right-11 {right: 11vw !important; } .bottom-11 {bottom: 11vw !important; } .top-12 {top: 12vw !important; } .left-12 {left: 12vw !important; } .right-12 {right: 12vw !important; } .bottom-12 {bottom: 12vw !important; } .top-13 {top: 13vw !important; } .left-13 {left: 13vw !important; } .right-13 {right: 13vw !important; } .bottom-13 {bottom: 13vw !important; } .top-14 {top: 14vw !important; } .left-14 {left: 14vw !important; } .right-14 {right: 14vw !important; } .bottom-14 {bottom: 14vw !important; } .top-15 {top: 15vw !important; } .left-15 {left: 15vw !important; } .right-15 {right: 15vw !important; } .bottom-15 {bottom: 15vw !important; }
.top-16 {top: 16vw !important; } .left-16 {left: 16vw !important; } .right-16 {right: 16vw !important; } .bottom-16 {bottom: 16vw !important; } .top-17 {top: 17vw !important; } .left-17 {left: 17vw !important; } .right-17 {right: 17vw !important; } .bottom-17 {bottom: 17vw !important; } .top-18 {top: 18vw !important; } .left-18 {left: 18vw !important; } .right-18 {right: 18vw !important; } .bottom-18 {bottom: 18vw !important; } .top-19 {top: 19vw !important; } .left-19 {left: 19vw !important; } .right-19 {right: 19vw !important; } .bottom-19 {bottom: 19vw !important; } .top-20 {top: 20vw !important; } .left-20 {left: 20vw !important; } .right-20 {right: 20vw !important; } .bottom-20 {bottom: 20vw !important; }
/* ==================
背景
==================== */
.bg-red {background-color: #e54d42;color: #ffffff;}
.bg-orange {background-color: #f37b1d;color: #ffffff;}
.bg-yellow {background-color: #fbbd08;color: #333333;}
.bg-olive {background-color: #8dc63f;color: #ffffff;}
.bg-green {background-color: #39b54a;color: #ffffff;}
.bg-cyan {background-color: #1cbbb4;color: #ffffff;}
.bg-blue {background-color: #0081ff;color: #ffffff;}
.bg-purple {background-color: #6739b6;color: #ffffff;}
.bg-mauve {background-color: #9c26b0;color: #ffffff;}
.bg-pink {background-color: #e03997;color: #ffffff;}
.bg-brown {background-color: #a5673f;color: #ffffff;}
.bg-grey {background-color: #8799a3;color: #ffffff;}
.bg-gray {background-color: #f0f0f0;color: #333333;}
.bg-black {background-color: #000000;color: #ffffff;}
.bg-white {background-color: #ffffff;color: #666666;}
@media (prefers-color-scheme: dark){ .bg-white {background-color: #303133 !important;color: #CCCCCC;} }
.bg-shadeTop {background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));color: #ffffff;}
.bg-shadeBottom {background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));color: #ffffff;}
.bg-red.light {color: #e54d42;background-color: #fadbd9;}
.bg-orange.light {color: #f37b1d;background-color: #fde6d2;}
.bg-yellow.light {color: #fbbd08;background-color: #fef2ced2;}
.bg-olive.light {color: #8dc63f;background-color: #e8f4d9;}
.bg-green.light {color: #39b54a;background-color: #d7f0dbff;}
.bg-cyan.light {color: #1cbbb4;background-color: #d2f1f0;}
.bg-blue.light {color: #0081ff;background-color: #cce6ff;}
.bg-purple.light {color: #6739b6;background-color: #e1d7f0;}
.bg-mauve.light {color: #9c26b0;background-color: #ebd4ef;}
.bg-pink.light {color: #e03997;background-color: #f9d7ea;}
.bg-brown.light {color: #a5673f;background-color: #ede1d9;}
.bg-grey.light {color: #8799a3;background-color: #e7ebed;}
.bg-gradual-red {background-image: linear-gradient(45deg, #f43f3b, #ec008c);color: #ffffff;}
.bg-gradual-orange {background-image: linear-gradient(45deg, #ff9700, #ed1c24);color: #ffffff;}
.bg-gradual-green {background-image: linear-gradient(45deg, #39b54a, #8dc63f);color: #ffffff;}
.bg-gradual-purple {background-image: linear-gradient(45deg, #9000ff, #5e00ff);color: #ffffff;}
.bg-gradual-pink {background-image: linear-gradient(45deg, #ec008c, #6739b6);color: #ffffff;}
.bg-gradual-blue {background-image: linear-gradient(45deg, #0081ff, #1cbbb4);color: #ffffff;}
/* ==================
文本
==================== */
.text-xs {font-size: .71rem;} .text-sm {font-size: .84rem;} .text-df {font-size: .97rem;} .text-lg {font-size: 1.1rem;}
.text-xl {font-size: 1.23rem;} .text-xxl {font-size: 1.36rem;} .text-sl {font-size: 2.7rem;} .text-xsl {font-size: 4.05rem;}
.text-Abc {text-transform: Capitalize;} .text-ABC {text-transform: Uppercase;} .text-abc {text-transform: Lowercase;}
.text-price::before {content: "¥";font-size: 80%;margin-right: 2px;}
.text-bold {font-weight: bold;} .text-center {text-align: center;} .text-content {line-height: 1.6;} .text-left {text-align: left;} .text-right {text-align: right;}
.text-white, .line-white, .lines-white {color: #ffffff;}
.text-red, .line-red, .lines-red {color: #e54d42;}
.text-orange, .line-orange, .lines-orange {color: #f37b1d;}
.text-yellow, .line-yellow, .lines-yellow {color: #fbbd08;}
.text-olive, .line-olive, .lines-olive {color: #8dc63f;}
.text-green, .line-green, .lines-green {color: #39b54a;}
.text-cyan, .line-cyan, .lines-cyan {color: #1cbbb4;}
.text-blue, .line-blue, .lines-blue {color: #0081ff;}
.text-purple, .line-purple, .lines-purple {color: #6739b6;}
.text-mauve, .line-mauve, .lines-mauve {color: #9c26b0;}
.text-pink, .line-pink, .lines-pink {color: #e03997;}
.text-brown, .line-brown, .lines-brown {color: #a5673f;}
.text-grey, .line-grey, .lines-grey {color: #8799a3;}
.text-gray, .line-gray, .lines-gray {color: #aaaaaa;}
.text-black, .line-black, .lines-black {color: #333333;}
@media (prefers-color-scheme: dark){ .text-gray, .line-gray, .lines-gray {color: #cccccc !important;} }
@media (prefers-color-scheme: dark){ .text-black, .line-black, .lines-black {color: #ffffff !important;} }
/* 文字阴影 */
.text-shadow[class*="-red"] {text-shadow: .3rem .3rem .648rem rgba(204, 69, 59, 0.2);}
.text-shadow[class*="-orange"] {text-shadow: .3rem .3rem .648rem rgba(217, 109, 26, 0.2);}
.text-shadow[class*="-yellow"] {text-shadow: .3rem .3rem .648rem rgba(224, 170, 7, 0.2);}
.text-shadow[class*="-olive"] {text-shadow: .3rem .3rem .648rem rgba(124, 173, 55, 0.2);}
.text-shadow[class*="-green"] {text-shadow: .3rem .3rem .648rem rgba(48, 156, 63, 0.2);}
.text-shadow[class*="-cyan"] {text-shadow: .3rem .3rem .648rem rgba(28, 187, 180, 0.2);}
.text-shadow[class*="-blue"] {text-shadow: .3rem .3rem .648rem rgba(0, 102, 204, 0.2);}
.text-shadow[class*="-purple"] {text-shadow: .3rem .3rem .648rem rgba(88, 48, 156, 0.2);}
.text-shadow[class*="-mauve"] {text-shadow: .3rem .3rem .648rem rgba(133, 33, 150, 0.2);}
.text-shadow[class*="-pink"] {text-shadow: .3rem .3rem .648rem rgba(199, 50, 134, 0.2);}
.text-shadow[class*="-brown"] {text-shadow: .3rem .3rem .648rem rgba(140, 88, 53, 0.2);}
.text-shadow[class*="-grey"] {text-shadow: .3rem .3rem .648rem rgba(114, 130, 138, 0.2);}
.text-shadow[class*="-gray"] {text-shadow: .3rem .3rem .648rem rgba(114, 130, 138, 0.2);}
.text-shadow[class*="-black"] {text-shadow: .3rem .3rem .648rem rgba(26, 26, 26, 0.2);}
@media (prefers-color-scheme: dark){ .text-shadow[class*="-black"] {text-shadow: .3rem .3rem .648rem rgba(255, 255, 255, 0.2);} }
/* ==================
步骤条
==================== */
.cu-steps {display: flex;}
.cu-steps .cu-item {flex: 1;text-align: center;position: relative;min-width: 3.2rem;}
.cu-steps .cu-item:not([class*="text-"]) {color: #8799a3;}
@media (prefers-color-scheme: dark){ cu-steps .cu-item:not([class*="text-"]) {color: #cccccc;} }
.cu-steps .cu-item [class*="cuIcon-"], .cu-steps .cu-item .num {display: block;font-size: 1.284rem;line-height: 2.568rem;}
.cu-steps .cu-item::before, .cu-steps .cu-item::after, .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {content: "";display: block;position: absolute;height: 0px;width: calc(100% - 2.568rem);border-bottom: 1px solid #ccc;left: calc(0px - (100% - 2.568rem) / 2);top: 1.284rem;z-index: 0;}
@media (prefers-color-scheme: dark){ .cu-steps .cu-item::before, .cu-steps .cu-item::after, .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {border-bottom: 1px solid rgba(255,255,255,0.1);} }
.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {content: "\e6a3";font-family: 'cuIcon';height: .92rem;border-bottom-width: 0px;line-height: .92rem;top: 0;bottom: 0;margin: auto;color: #ccc;}
.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {bottom: 1.284rem;top: initial;}
.cu-steps .cu-item::after {border-bottom: 1px solid currentColor;width: 0px;transition: all 0.3s ease-in-out 0s;}
.cu-steps .cu-item[class*="text-"]::after {width: calc(100% - 2.568rem);color: currentColor;}
.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {display: none;}
.cu-steps .cu-item .num {width: 1.284rem;height: 1.284rem;border-radius: 50%;line-height: 1.284rem;margin: .642rem auto;font-size: .772rem;border: 1px solid currentColor;position: relative;overflow: hidden;}
.cu-steps .cu-item[class*="text-"] .num {background-color: currentColor;}
.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {content: attr(data-index);position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;transition: all 0.3s ease-in-out 0s;transform: translateY(0px);}
.cu-steps .cu-item[class*="text-"] .num::before {transform: translateY(-1.284rem);color: #ffffff;}
.cu-steps .cu-item .num::after {transform: translateY(1.284rem);color: #ffffff;transition: all 0.3s ease-in-out 0s;}
.cu-steps .cu-item[class*="text-"] .num::after {content: "\e645";font-family: 'cuIcon';color: #ffffff;transform: translateY(0px);}
.cu-steps .cu-item[class*="text-"] .num.err::after {content: "\e646";}
/* ==================
时间轴
==================== */
.cu-timeline {display: block;background-color: #ffffff;}
@media (prefers-color-scheme: dark){ .cu-timeline {background-color: #303133;} }
.cu-timeline .cu-time {width: 12.88vw;text-align: center;padding: 2.48vw 0;font-size: .84rem;color: #888;display: block;}
@media (prefers-color-scheme: dark){ .cu-timeline .cu-time {color: #cccccc;} }
.cu-timeline>.cu-item {padding: 3.72vw 3.72vw 3.72vw 12.88vw;position: relative;display: block;z-index: 0;}
.cu-timeline>.cu-item:not([class*="text-"]) {color: #ccc;}
.cu-timeline>.cu-item::after {content: "";display: block;position: absolute;width: 1px;background-color: #ddd;left: 6.44vw;height: 100%;top: 0;z-index: 8;}
@media (prefers-color-scheme: dark){ .cu-timeline>.cu-item::after {background-color: #4b4d4f;} }
.cu-timeline>.cu-item::before {font-family: "cuIcon";display: block;position: absolute;top: 4.464vw;z-index: 9;background-color: #ffffff;width: 5.2vw;height: 5.2vw;text-align: center;border: none;line-height: 5.2vw;left: 4.464vw;}
@media (prefers-color-scheme: dark){ .cu-timeline>.cu-item::before {background-color: #303133;} }
.cu-timeline>.cu-item:not([class*="cuIcon-"])::before {content: "\e763";}
.cu-timeline>.cu-item[class*="cuIcon-"]::before {background-color: #ffffff;width: 5.2vw;height: 5.2vw;text-align: center;border: none;line-height: 5.2vw;left: .744vw;}
@media (prefers-color-scheme: dark){ .cu-timeline>.cu-item[class*="cuIcon-"]::before {background-color: #303133;} }
.cu-timeline>.cu-item>.content {padding: 3.72vw;border-radius: .4rem;display: block;line-height: 1.6;}
.cu-timeline>.cu-item>.content:not([class*="bg-"]) {background-color: #f1f1f1;color: #333333;}
@media (prefers-color-scheme: dark){ .cu-timeline>.cu-item>.content:not([class*="bg-"]) {background-color: #4b4d4f;} }
.cu-timeline>.cu-item>.content+.content {margin-top: 2.48vw;}
/* ==================
进度条
==================== */
.cu-progress {overflow: hidden;height: 3.472vw;background-color: #ebeef5;display: inline-flex;align-items: center;width: 100%;}
.cu-progress+view, .cu-progress+text {line-height: 1;} .cu-progress.xs {height: 1.24vw;} .cu-progress.sm {height: 2.48vw;}
.cu-progress view {width: 0;height: 100%;align-items: center;display: flex;justify-items: flex-end;justify-content: space-around;font-size: .646rem;color: #ffffff;transition: width 0.6s ease;}
.cu-progress text {align-items: center;display: flex;font-size: .646rem;color: #333333;text-indent: .323rem;} .cu-progress.text-progress {padding-right: 6.44vw;}
.cu-progress.striped view {background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size: 2.32rem 2.32rem;}
.cu-progress.active view {animation: progress-stripes 2s linear infinite;} @keyframes progress-stripes { from {background-position: 2.32rem 0;} to {background-position: 0 0;} }
/* ==================
按钮
==================== */
.cu-btn {position: relative;border: 0;display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box;padding: 0 3.72vw;font-size: .97rem;height: 6.936vw;line-height: 1;text-align: center;text-decoration: none;overflow: visible;margin-left: initial;transform: translate(0px, 0px);margin-right: initial;}
.cu-btn::after {display: none;} .cu-btn:not([class*="bg-"]) {background-color: #f0f0f0;} @media (prefers-color-scheme: dark){ .cu-btn:not([class*="bg-"]) {background-color: #4b4d4f;} }
.cu-btn[class*="line"] {background-color: transparent;} .cu-btn[class*="line"]::after {content: " ";display: block;width: 200%;height: 200%;position: absolute;top: 0;left: 0;border: 1px solid currentColor;transform: scale(0.5);transform-origin: 0 0;box-sizing: border-box;border-radius: .4rem;z-index: 1;pointer-events: none;} .cu-btn.round[class*="line"]::after {border-radius: 1000px;}
.cu-btn[class*="lines"]::after {border: .2rem solid currentColor;} .cu-btn[class*="bg-"]::after {display: none;} .cu-btn.sm {padding: 0 2.48vw;font-size: .71rem;height: 5.952vw;} .cu-btn.lg {padding: 0 4.96vw;font-size: 1.1rem;height: 9.92vw;} .cu-btn.cuIcon.sm {width: 5.952vw;height: 5.952vw;} .cu-btn.cuIcon {width: 6.936vw;height: 6.936vw;border-radius: 500px;padding: 0;}
button.cuIcon.lg {width: 9.92vw;height: 9.92vw;} .cu-btn.shadow-blur::before {top: .3rem;left: .3rem;filter: blur(.36rem);opacity: 0.6;} .cu-btn.button-hover {transform: translate(1px, 1px);} .block {display: block;} .cu-btn.block {display: flex;} .cu-btn[disabled] {opacity: 0.6;color: #ffffff;}